PBA INSTITUTE

Animation Button

Create animated buttons in CSS by applying transitions and transforms to enhance user interaction. Start with basic styles for '.btn', defining padding, font, color, and background. Use hover pseudo-class to modify background color and add a scaling effect (transform: scale(1.1);). Utilize transition property to ensure smooth animation. Customize further with gradients, shadows, or keyframes for advanced effects, enhancing visual appeal and usability.

Here are some example of animated buttons.

Float Right

														
														

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body><style type="text/css">
button {
    background: tomato;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
    color: white;
    font-family: 'Puritan', sans-serif;
    font-size: 20px;
    outline: none;
    padding: 15px;
    margin: 6px;

}
.animationButton1 {
  	transition: all 0.3s ease-out;
}
.animationButton1:hover, .animationButton1:focus, .animationButton1:active {
  	cursor: pointer;
  	transform: translateX(6px);
}
</style>
<section>
	<button class="animationButton1" type="button" name="button">Float Right</button>
</section>
</body>
</html>
 


														
														
													

OUTPUT:

Float Left

														
														

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
   
    <title></title>
    
 
  </head>
  <body><style type="text/css">
  	button 
    {
      background: tomato;
      border: none;
      border-radius: 5px;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
      color: white;
      font-family: 'Puritan', sans-serif;
      font-size: 20px;
      outline: none;
      padding: 15px;
      margin: 6px;
    }
  	.animationButton2
    {
      transition: all 0.3s ease-out;
    }
.animationButton2:hover, .animationButton2:focus, .animationButton2:active 
{
  cursor: pointer;
  transform: translateX(-6px);
}
  </style>
    <section>

    	<button class="animationButton2" type="button" name="button">Float Left</button>
    	 </section>
    </body>
</html>
 


														
														
													

OUTPUT:

Left Rotate Animated Button

														
														

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
   
    <title></title>
    
 
  </head>
  <body><style type="text/css">
  	button 
    {
      background: #ccc;
      border: none;
      border-radius: 5px;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
      color: #111;
      font-family: 'Puritan', sans-serif;
      font-size: 20px;
      outline: none;
      padding: 15px;
      margin: 6px;
    }
  .animationButton6 
  {
    transition: transform 0.3s ease;
  }
.animationButton6:hover, .animationButton6:focus, .animationButton6:active 
{
  cursor: pointer;
  transform: rotate(-4deg);
}

  </style>
    <section>

    	<button class="animationButton6" type="button" name="button">Rotate Left</button>
    	 </section>
    </body>
</html>
 


														
														
													

OUTPUT:

Pop Animated Button

														
														

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
   
    <title></title>
    
 
  </head>
  <body><style type="text/css">
  	button 
    {
      background: #ccc;
      border: none;
      border-radius: 5px;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
      color: #111;
      font-family: 'Puritan', sans-serif;
      font-size: 20px;
      outline: none;
      padding: 15px;
      margin: 6px;
    }
 .animationButton11:hover, .animationButton11:focus, .animationButton11:active 
  {
    animation: hover-pop 0.3s linear 1;
    cursor: pointer;
  }

@keyframes hover-pop 
{
  50% 
  {
    transform: scale(1.2);
  }
}

  </style>
    <section>

    	<button class="animationButton11" type="button" name="button">Pop</button>

    	 </section>
    </body>
</html>
 


														
														
													

OUTPUT:

Conclusion :

In conclusion, Animated buttons in CSS enhance user experience by providing visual feedback on interaction. They make websites more engaging and intuitive, guiding users to clickable elements. Animation helps attract attention without being intrusive, thus improving user engagement and retention. Additionally, CSS animations are lightweight, ensuring fast loading times and compatibility across devices. Overall, animated buttons contribute to a more dynamic and user-friendly web interface.

Introduction Selectors Style Sheet Insertion CSS Color CSS Backgrounds
CSS Border CSS Margin CSS Table CSS Text Fonts CSS Links Animation Button Transition Cursor Type Navbar Layout Login Page Image Slider

Animation Button

Conclusion :

CSS All Topics

SHARE